import React, { Suspense, useState } from 'react'
import { Toast } from 'antd-mobile'

const Commingsoon = React.lazy(()=> import ('./components/Commingsoon'))  //懒加载引入其他组件
const Nowplaying = React.lazy(()=> import('./components/Nowplaying'))
export default function App() {
    const [type, setType] = useState(true)
  return (
    <div>
        <ul>
            <li onClick={()=>{
                setType(true)
            }}>正在热映</li>
            <li onClick={()=>{
                setType(false)
            }}>即将上映</li>
        </ul>
        <Suspense fallback={<div>正在加载...</div>}>   {/* 在加载懒加载的页面过程中, Suspense  fallback里面就是要显示的东西*/}
            {
                type?<Nowplaying/>:<Commingsoon/>
            }
        </Suspense>
    </div>
  )
}
